// JavaScript Document
$(document).ready(function(){
	$(".left-nav ul li a").live("mouseover mouseout", function(event) {
	  if ( event.type == "mouseover" ) {
		  if(!$(this).is(":animated"))
			$(this).animate({"margin-right":"10"},200);
	  } else if ( event.type == "mouseout" ) {
			$(this).animate({"margin-right":"0"},200);
	  }
	});
	$(".content").live("mouseover mouseout", function(event) {
	  if ( event.type == "mouseover" ) {
		  	manageControls(currentPosition);
	  } else if ( event.type == "mouseout" ) {
			$("#leftControl").hide();
			$("#rightControl").hide();
	  }
	});
	$("#leftControl").live("mouseover mouseout", function(event) {
	  if ( event.type == "mouseover" ) {
			$(this).css({"background-position":"0px 0px"});
	  } else if ( event.type == "mouseout" ) {
			$(this).css({"background-position":"0px 0px"});
	  }
	});
	$("#rightControl").live("mouseover mouseout", function(event) {
	  if ( event.type == "mouseover" ) {
			$(this).css({"background-position":"-110px 0px"});
	  } else if ( event.type == "mouseout" ) {
			$(this).css({"background-position":"-110px 0px"});
	  }
	});
  currentPosition = 0;
  var slideWidth = 900;
  var slides = $('.slide');
  numberOfSlides = slides.length;
  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');
  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
  .css({
      'float' : 'left',
      'width' : slideWidth
    });
  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  // Insert controls in the DOM
  $('#slideshow')
    .append('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  // Hide left arrow control on first load
  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	  currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
	  $('#slideInner').animate({
		  'marginLeft' : slideWidth*(-currentPosition)
		}, "slow");
	  // Hide / show controls
		manageControls(currentPosition);
  });
	setInterval(function()
	  {
		//alert("2s");
		nextPic();
		//manageControls(currentPosition);
	  },5000);
  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
  if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
  // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }  
  $(".left-nav ul li a").live("mouseover mouseout", function(event) {
	  if ( event.type == "mouseover" ) {
		  	$(this).css({"color":"#FFF","text-shadow": "0px 0px 1px #999"});
			
	  } else if ( event.type == "mouseout" ) {
			$(this).css({"color":"#555","text-shadow": "none"});
	  }
	});
	function nextPic()
	{
		currentPosition += 1;
		if(currentPosition == numberOfSlides )
		{
			//alert("Vao day");
			$('#slideInner').animate({
			  'marginLeft' : 0
			}, "slow");
			currentPosition = 0;
		}
		else
		{
			$('#slideInner').animate({
			  'marginLeft' : slideWidth*(-currentPosition)
			}, "slow");
		}
		
	}
	$("#leftControl").hide();
	$("#rightControl").hide();
	
	
	
	
	
	/*
	*   Đăng ký hàm cho phần Fancybox
	*/
			/*
			*   Examples - images
			*/

			$("a#example1").fancybox();

			$("a#example2").fancybox({
				'overlayShow'	: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic'
			});

			$("a#example3").fancybox({
				'transitionIn'	: 'none',
				'transitionOut'	: 'none'	
			});

			$("a#example4").fancybox({
				'opacity'		: true,
				'overlayShow'	: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'none'
			});

			$("a#example5").fancybox();

			$("a#example6").fancybox({
				'titlePosition'		: 'outside',
				'overlayColor'		: '#000',
				'overlayOpacity'	: 0.9
			});

			$("a#example7").fancybox({
				'titlePosition'	: 'inside'
			});

			$("a#example8").fancybox({
				'titlePosition'	: 'over'
			});

			$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});

			/*
			*   Examples - various
			*/

			$("#various1").fancybox({
				'titlePosition'		: 'inside',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});

			$("#various2").fancybox();

			$("#various3").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});

			$("#various4").fancybox({
				'padding'			: 0,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
	/*
	*   end Đăng ký hàm cho phần Fancybox
	*/
});